/* 根容器使用flex布局 */
.container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    justify-content: space-between;
}

/* 左右面板和K-V列表并排显示 */
.main-content {
    display: flex;
    flex: 1;
}

/* 左右面板布局 */
.left-panel, .right-panel {
    display: flex;
    flex-direction: column;
    padding: 20px;
}

.left-panel {
    flex: 2;
}

.right-panel {
    flex: 1;
    align-items: flex-start;
}

/* K-V标签列表的布局 */
.tag-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.tag-item input {
    margin-right: 5px;
    flex: 1;
}

.tag-item button {
    margin-left: 5px;
}

/* 按钮布局在最底部 */
.buttons {
    display: flex;
    justify-content: flex-end;
    padding: 20px;
}

.buttons button {
    margin-right: 10px;
}

/* 设置textarea的最小高度，并让高度根据内容自动扩展 */
textarea {
    min-height: 100px; /* 设置一个最小高度 */
    max-height: 1000px; /* 设置一个最大高度，防止无限扩展 */
    overflow-y: auto; /* 当内容超过最大高度时，出现滚动条 */
    resize: none; /* 禁止手动调整大小，可以根据需要启用 */
}
